<template>
  <div class="jifen">
    <header>
      <div class="left" @click="huitui"><a><img src="../assets/img/m1.png" ></a></div>
      <div class="center">{{msg}}</div>  
      <div class="right"><a></a></div>
    </header>
    <main>
      <div class="kong"></div>
      <div class="top">
        <div class="shang">
          <img src="../assets/img/m13.png">
        </div>
        <div class="xia">
          满意行V{{banben}}
        </div>
      </div>
      <div class="kong"></div>
      <div class="jiancha" @click="danji">
        <div>
        <img src="../assets/img/m12.png">
        <p>检查更新</p>
        </div>
        <img src="../assets/img/m7.png" v-show='gengduo' >
      </div>
      <div class="an">
        <div class="div" v-show='zuixin'>
          当前版本已是最新版本V{{xinban}}
        </div>
      </div>
    </main>
   
    <footer>
      <div class="top">客户电话：{{dianhua}}</div>
      <div class="botton">
        <div>
          
        </div>
        <p>{{wangzhi}}</p>
        <div></div>
      </div>
    </footer>
    <div class="tanchuang" v-show = "yinchang">
        <div class="gengxin">
          <div class="top">
            更新
          </div>
          <div class="center">
            <p><span>满意行{{xinban}}新特性:</span></p>
            <p v-for="(item,index) in tuijia" :key="item"><label>{{index+1}}、</label>{{item.jianjie}}</p>
          </div>
          <div class="bottom">
            提示：如果不更新 ，将无法使用新添功能
          </div>
          <div class="anniu">
            <div class="left"  @click="yinchang=false">取消</div>
            <div class="right">立即更新</div>
          </div>
        </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '关于我们',
      banben: '0.8.0',
      dianhua: '400-000-5555',
      wangzhi: 'WWW.MY56.COM',
      yinchang: false,
      zuixin: false,
      gengduo: true,
      xinban: '0.9.0',
      tuijia: [
            {imgsrc: '../assets/img/m18.png', name: '充值卡', jianjie: '沟通你我', kucun: '100'},
            {imgsrc: '../assets/img/m17.png', name: '充卡', jianjie: '沟我', kucun: '10'},
            {imgsrc: '../assets/img/m19.png', name: '卡', jianjie: '沟我', kucun: '150'},
            {imgsrc: '../assets/img/m20.png', name: '充卡', jianjie: '沟通我', kucun: '1800'}
      ]
    }
  },
  methods: {
    danji () { 
      if (this.banben !== this.xinban) { 
        this.yinchang = true 
      } else { 
        this.zuixin = true
        this.gengduo = false 
      } 
    },
    huitui () {
      this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
  .jifen{
height: 100%;
background: #f3f1f1;
  }
  .tanchuang{
    height: 100%;
    width: 100%;
    position: absolute;
    background:rgba(0,0,0,0.5);
    top: 0;
    display: flex;
    
    .gengxin{
      background: #fff;
      width: 75%;
      margin:  auto;
      opacity: 1;
      .padding(60,60,60,60);
      .border-radius(10);
      .top{
        .font-size(36);

      }
      .center{
         .padding(60,0,60,0);
        .line-height(50);
        .font-size(36);
        p{
          color:#646464;
          span{
            color:black;
          }
        }
      }
      .bottom{
        .font-size(30);
        .padding(0,0,50,0);
      }
      .anniu{
        display: flex;
        justify-content: center;
        .left{
          .margin(0,20,0,0);
          .width(150);
          .line-height(70);
          .font-size(30);
          text-align: center; 
          border:2px solid black;
        }
        .right{
          .font-size(30);
          .width(150);
          .line-height(70);
          color:#fff;
          text-align: center; 
          background: #e93f33;
          border:2px solid #e93f33;
        }

      }
    }
  }
header{
  position: fixed;
  top: 0;
  width: 100%;
  .height(140);
  .font-size(40);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #28a85b;
  color:#ffffff;
  .left,.right{
      .width(160) ;
  }
  .center{
      flex: 1;
      text-align: center;
  }
  .left{
    a{
      display: block;
      img{
        .height(40);
        .padding(0,0,0,40);
        display: block;
      }
    }
  }
}
main{
  .padding(190,0,0,0);
  .kong{
    .height(20);

  }
  .an{
    display: flex;
    .padding(70,0,0,0);
    div{
      margin: auto;
       .padding(35,50,35,50); 
       background:#28a85b;
       .font-size(36);
       color: #fff;
       .border-radius(10);
    }
  }
  .top{
    background: #ffffff;
    .padding(45,0,0,0);
    .shang{
      display: flex;
      img{
        display: block;
        margin: auto;
        .width(139);
      }
    }
    .xia{
      .line-height(120);
      .font-size(36);
      text-align: center;
    }
  }
  .jiancha{
      background: #ffffff;
       display: flex;
      align-items: center;
      justify-content: space-between;
      .padding(0,20,0,20);
      .height(130);
      div{
     
      display: flex;
      align-items: center;
      img{
        .height(41);
        display: block;
        .padding(0,20,0,20);
      }
      p{
        .font-size(36);
      }
    }
    img{
      display: block;
      .height(41);
    }
  }
  
  
}
footer{
  .line-height(60);
  .font-size(36);
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  .padding(0,0,110,0);
  
  .botton{
    display: flex;
    align-items: center;
   .padding(0,20,0,20);
    div{ flex: 1;
      border-bottom:2px solid black; 
    }
    p{
      .padding(0,20,0,20);
    }
  }
}

</style>
